<template>
  <div>
    <div class="top">
      <div class="top-img">
        <div class="img">
          <img :src="productD.main_img_url" alt />
        </div>
        <router-link tag="div" to="/cart" class="cart-img">
          <span>{{cartNum}}</span>
          <img src="~assets/images/icon/cart@top.png" alt />
        </router-link>
      </div>

      <div class="top-cat">
        <div class="cat-left" @click="isShow=true">
          <span>数量</span>
          <span class="num">{{num}}</span>
          <van-icon name="arrow-down" />
        </div>
        <div class="cat-rigth" @click="addCart">
          <span>加入购物车</span>
          <img src="~assets/images/icon/cart.png" alt />
        </div>
      </div>

      <div class="top-goods">
        <div class="word1">{{productD.stock>0?'有货':'无货'}}</div>
        <div class="word2">{{productD.name}}</div>
        <div class="word3">¥ {{productD.price}}</div>
      </div>
    </div>

    <div class="line"></div>

    <div class="bottom">
      <div class="tab">
        <div
          class="tab-item"
          :class="{activate:currIndex===index}"
          v-for="(item,index) in ['商品详情','产品参数','售后保障']"
          @click="cutTab(index)"
          :key="item"
        >{{item}}</div>
      </div>

      <div v-if="currIndex == 0 ">
        <div class="product-img">
          <img v-for="(item,index) in productD.imgs" :key="item.id" :src="item.img_url.url" alt />
        </div>
      </div>

      <div v-if="currIndex == 1 ">
        <div class="product-g" v-for="(item,index) in  productD.properties" :key="index">
          <div class="left">{{item.name}}</div>
          <div>{{item.detail}}</div>
        </div>
      </div>

      <div v-if="currIndex == 2 " class="product-day">七天无理由免费退货</div>
    </div>

    <van-popup v-model="isShow" position="bottom" round>
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="isShow = false" />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Picker, Popup, Icon } from "vant";
Vue.use(Picker); //  选择器
Vue.use(Popup); // 遮罩
Vue.use(Icon); // 图标
import { getProductD } from "@/api/goods.js";

export default {
  // axios
  components: {},
  data() {
    return {
      isShow: false,
      num: 1, // 用户选择数量
      cartNum: 0, // 右上角购车的数量
      columns: [1, 2, 3, 4, 5, 10, 15, 20, 25, 30],
      productD: {},
      currIndex: 0,
      cartStoPro: "" //缓存里面的购物车数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let id = this.$route.query.id;
    getProductD(id).then(res => {
      this.productD = res;
      console.log(res);
    });
    //原有的商品
    const cart = this.$storage.getStorage("cart");
    this.cartStoPro = cart ? cart : []; // 第一次
    this.cartStoPro.forEach(element => {
      this.cartNum += element.cout;
    });
    // this.cartNum = this.cartStoPro.length
  },
  //方法集合
  methods: {
    cutTab(index) {
      this.currIndex = index;
    },

    addCart() {
      delete this.productD["imgs"];
      delete this.productD["properties"];
      // 右上角数量要变  用户选择的商品数量  + 原有的商品数量
      this.cartNum = this.num + this.cartNum;
      // 要把 商品(productD) 存缓存(localStorage)
      let cartPro = this.cartStoPro; //购物车的数量
      // 数组去重
      // 解决购物车商品重复的问题
      let isExit = false; // 不存在
      this.productD.cout = this.num;
      this.productD.isSelect = false
      for (let i = 0; i < cartPro.length; i++) {
        if (this.productD.id == cartPro[i].id) {
          cartPro[i].cout += this.num;
          isExit = true;
          break;
        }
      }
      if (!isExit) {
        // 不存在
        cartPro.push(JSON.parse(JSON.stringify(this.productD)));
      }
      this.$storage.setStorage("cart", cartPro);

      // [{},{},{}] //json

      // localStorage.setItem("key",'123456')
      // localStorage.getItem("key")

      // this.$storage.setStorage('cart','123456')

      // console.log(this.$storage.getStorage('cart'))
    },

    onConfirm(value) {
      console.log(value);
      // 获取用户选择的商品数量
      this.isShow = false;
      this.num = Number(value);
      console.log(this.num);
    }
  }
};
</script>
<style lang='scss' scoped>
.top {
  margin-bottom: 0.8rem;
  .top-img {
    display: flex;
    justify-content: center;
    position: relative;
    .img {
      width: 12rem;
      height: 12rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cart-img {
      position: absolute;
      right: 1rem;
      top: 1rem;
      width: 1.5rem;
      img {
        width: 100%;
      }
      span {
        position: absolute;
        right: 1rem;
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.5rem;
        background-color: #ab956d;
        color: white;
        text-align: center;
        border-radius: 0.5rem;
      }
    }
  }
  .top-cat {
    display: flex;
    justify-content: space-around;
    background-color: #ab956d;
    border-radius: 10rem;
    margin: 0 0.5rem;
    padding: 0.8rem 0;
    font-size: 0.9px;
    color: #fff;
    .cat-left {
      display: flex;
      justify-content: center;
      width: 50%;
      border-right: 1px #fff dotted;
      .num {
        margin: 0 1rem;
      }
    }
    .cat-rigth {
      width: 50%;
      // display: flex;
      // justify-content: space-around;
      margin-left: 1.5rem;
      position: relative;
      img {
        position: absolute;
        width: 0.8rem;
        right: 2rem;
        top: -0.3rem;
      }
    }
  }
  .top-goods {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 1rem;
    .word1 {
      font-size: 0.5rem;
    }
    .word2 {
      margin: 0.8rem 0;
    }
    .word3 {
      font-size: 0.6rem;
    }
  }
}
.line {
  height: 1rem;
  width: 100%;
  background-color: #f9f9f9;
}

.bottom {
  margin-top: 0.1rem;
  .tab {
    display: flex;
    justify-content: space-around;
    font-size: 0.6rem;
    margin-bottom: 0.3rem;
    .tab-item {
      padding: 0.5rem 0;
      border-bottom: 0.08rem solid #ccc;
      width: 100%;
      text-align: center;
    }
    .activate {
      color: rgba(171, 149, 109, 0.8);
      border-bottom-color: rgba(171, 149, 109, 0.8);
    }
  }
  .product-img {
    img {
      width: 100%;
      height: 100%;
      float: left;
    }
  }
  .product-g {
    display: flex;
    justify-content: start;
    font-size: 0.5rem;
    margin: 1rem 0 1rem 1rem;
    .left {
      margin-right: 1rem;
    }
  }
  .product-day {
    font-size: 0.5rem;
    text-align: center;
    margin-top: 1rem;
  }
}
</style>